<template>
  <ContentWrap>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      v-loading="formLoading"
    >
      <el-form-item label="hideId" v-show="false">
        <el-input v-model="formData.id" />
      </el-form-item>

      <el-tabs>
        <el-tab-pane label="投放配置">
          <!-- <el-form-item label="投放规则说明" prop="tips">
            <el-input
              v-model="formData.tips"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 6 }"
              placeholder="请输入投放规则说明"
            />
          </el-form-item> -->
          <el-form-item label="投放预设金额" prop="presetAmounts">
            <el-input
              v-model="computePresetAmounts"
              placeholder="请输入投放预设金额"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              投放预设金额，
              <span class="text-red-400">用英文逗号“,”分隔。</span>
            </el-text>
          </el-form-item>
          <el-form-item label="最低预算限额" prop="minBugetAmount">
            <el-input-number
              v-model="computedMinBugetAmount"
              placeholder="请输入最低预算限额"
              :min="1"
              :max="99999999"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              预算金额不得
              <span class="text-red-400">低于 {{ computedMinBugetAmount }} 元。</span>
            </el-text>
          </el-form-item>
          <el-form-item label="曝光预估单价" prop="exposureUnitPrice">
            <el-input-number
              v-model="computedExposureUnitPrice"
              placeholder="请输入曝光预估单价"
              :min="0"
              :max="99999999"
              :step="1"
              :precision="2"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              每曝光<span class="text-red-400">
                1 次预估需要费用 {{ computedExposureUnitPrice }} 元。</span
              >仅作为参考，曝光了用户不一定去看，实际计费以播放次数为准。
            </el-text>
          </el-form-item>
          <el-form-item label="播放计时秒数" prop="playMinSeconds">
            <el-input-number
              v-model="formData.playMinSeconds"
              placeholder="请输入播放计时秒数"
              :min="5"
              :max="120"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              每次播放广告视频<span class="text-red-400">
                不得少于 {{ formData.playMinSeconds }} 秒。</span
              >
            </el-text>
          </el-form-item>
          <el-form-item label="播放计费金额" prop="exposureUnitPrice">
            <el-input-number
              v-model="computedPlayUnitPrice"
              placeholder="请输入播放计费金额"
              :min="0"
              :max="99999999"
              :step="1"
              :precision="2"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              每播放完成<span class="text-red-400"> 1 次收费 {{ computedPlayUnitPrice }} 元。</span>
            </el-text>
          </el-form-item>
          <el-form-item label="每日任务广告数" prop="dailyTaskAdCount">
            <el-input-number
              v-model="formData.dailyTaskAdCount"
              placeholder="请输入每日任务广告数"
              :min="0"
              :max="99999999"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              每日做任务来增值联盟豆，需要播放
              <span class="text-red-400"> {{ formData.dailyTaskAdCount }} 个广告视频。</span>
            </el-text>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
</template>
<script lang="ts" setup>
import * as ConfigApi from '@/api/ad/config'
import { fenToYuan, yuanToFen } from '@/utils'

defineOptions({ name: 'ShopConfig' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref<any>({
  id: undefined,
  tips: '',
  minBugetAmount: 0,
  presetAmounts: [],
  exposureUnitPrice: 0,
  playMinSeconds: 0,
  playUnitPrice: 0,
  dailyTaskAdCount: 0
})

const formRules = reactive({})
const formRef = ref() // 表单 Ref

const computePresetAmounts = computed({
  get: () => (formData.value.presetAmounts ? formData.value.presetAmounts.join(',') : ''),
  set: (newValue: string) => {
    formData.value.presetAmounts = newValue ? newValue.split(',') : []
  }
})
const computedMinBugetAmount = computed({
  get: () => Number(fenToYuan(formData.value.minBugetAmount)),
  set: (newValue: number) => {
    formData.value.minBugetAmount = yuanToFen(newValue)
  }
})
const computedExposureUnitPrice = computed({
  get: () => Number(fenToYuan(formData.value.exposureUnitPrice)),
  set: (newValue: number) => {
    formData.value.exposureUnitPrice = yuanToFen(newValue)
  }
})
const computedPlayUnitPrice = computed({
  get: () => Number(fenToYuan(formData.value.playUnitPrice)),
  set: (newValue: number) => {
    formData.value.playUnitPrice = yuanToFen(newValue)
  }
})

/** 修改配置 */
const onSubmit = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value
    await ConfigApi.saveConfig(data)
    message.success(t('common.updateSuccess'))
    dialogVisible.value = false
  } finally {
    formLoading.value = false
  }
}

/** 获得配置 */
const getConfig = async () => {
  try {
    const data = await ConfigApi.getConfig()
    if (data === null) {
      return
    }
    Object.assign(formData.value, data)
  } finally {
  }
}

onMounted(() => {
  getConfig()
})
</script>
